//为按钮注册click事件监听器
window.onload = function () {
    document.getElementById("dlr").onclick = seeDLR;
    document.getElementById("ldr").onclick = seeLDR;
    document.getElementById("lrd").onclick = seeLRD;
    document.getElementById("clear").onclick = clear;
}

//前序遍历
function dlr( thisNode ) {
    if( thisNode != null){
        arr.push( thisNode );
        dlr( thisNode.children[0] );
        dlr( thisNode.children[1] );       
    }
}

//中序遍历
function ldr( thisNode ) {
    if( thisNode != null){
        ldr( thisNode.children[0] );
        arr.push( thisNode );
        ldr( thisNode.children[1] );       
    }
}

//后续遍历
function lrd( thisNode ) {
    if( thisNode != null){
        lrd( thisNode.children[0] );
        lrd( thisNode.children[1] );
        arr.push( thisNode );
    }
}

arr = new Array();
window.node = document.getElementById( "root" );
//前序遍历可视化
function seeDLR(){
    dlr( node );
    show();
}

//中序遍历可视化
function seeLDR(){
    ldr( node );
    show();
}

//后序遍历可视化
function seeLRD(){
    lrd( node );
    show();
}

//改变遍历过的节点背景颜色，达到标识的效果
function show(){
    time1 = setInterval( function(){
        if ( arr.length>=1 ){
            selNode( arr.shift() );
        } else{
            clearInterval( time1 )
        }
    },500);
}

//清楚遍历标识
function clear(){
    clearAll( node );
}
function clearAll( thisNode ){
    if( thisNode != null){
        delNode( thisNode );
        clearAll( thisNode.children[0] );
        clearAll( thisNode.children[1] );
    }
}
//改变遍历过的节点背景颜色
function selNode(element) {
    element.style.backgroundColor = "#888";
}

//清除遍历标记
function delNode(element) {
    element.style.backgroundColor = "";
}
